<template>
	<m-layout title="积分充值" barBg="unset" color="#fff">
		<m-block gap="24" spa="80 0 0 ">
			<view class="flex-between">
				<m-text block spa="0 0 30 0" weight="Bold" ftsize="28">积分充值</m-text>
			</view>
			<m-input v-model="amount" placeholder="请输入充值的积分数量" type="number">

			</m-input>
			<m-text block spa="30 0 0" color='#856BFF' :text="`可用积分：${balance2}`"></m-text>
			<view class="flex-center">
				<m-icon color="var(--theme)" wh="65" type="icon-jiantou1"></m-icon>
			</view>
			<m-block bgColor="#F1EEFF" gap="30" spa="30 0">
				<view class="flex-between">
					<m-text ftsize="28" weight="Bold">总需支付</m-text>
					<m-number leftText="￥" size="28 24"  weight="Bold" :value="toAmount" v-if="toAmount"></m-number>
					<m-text ftsize="28"  v-else>-- </m-text>
				</view>
			</m-block>
			<m-block bgColor="#F5F5F5" gap="25 30" spa="30 0">
				<m-text block ftsize="26" weight="Bold">注意事项：</m-text>
				<m-text block ftsize="24" color='#666' spa="20 0 0">1.充值限额：{{config515.join('-')}}积分；</m-text>
				<m-text block ftsize="24" color='#666' spa="20 0 0">2.充值后请您务必到对应账户查询资金的到账情况。</m-text>
			</m-block>
		</m-block>

		<view class="">
			<m-agreement spa="80 0 20" v-model="isCheck" title="积分充值协议" code="czxy_jf"></m-agreement>
			<m-button  block @click="verify">确定</m-button>
		</view>

	</m-layout>
</template>

<script>
	import { balance } from '@/api/Users.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				isCheck: true,
				amount: '',
			};

		},
		computed: {
			...mapState({
				userbalance: state => state.user.userbalance,
				config: state => state.general.config,
			}),
			balance2() {
				try {
					return this.userbalance[2]['balance']
				} catch (e) {
					return 0
					//TODO handle the exception
				}
			},
			toAmount() {
				let a = this.times(this.amount, this.config514)
				return a <= 0 ? 0 : a || '--'
			},
			config514() {
				return this.config[514]
			},
			config515() {
				let a = this.config[515].split('-').map(Number);
				return a
			},

		},
		onShow() {
			balance()
		},
		onLoad() {
			this.init()
		},
		methods: {
			verify() {
				if (!this.$m.verify.range(Number(this.amount), this.config515)) {
					return this.Toast('充值限额' + this.config515.join('-'))
				}
				if (!this.isCheck) {
					return this.Toast('请阅读并同意《积分充值协议》')
				}
				this.Jump({
					url: '/pages/surePay',
					params: {
						methods: 'Recharg_jf',
						price: this.toAmount,
						jfcount: this.amount,
					}
				})
			},
			async init() {

			},
		},
		onPullDownRefresh() {
			this.init();
		},

	}
</script>

<style lang="scss">
	page {
		background:url('https://files.hcypai.com/static/imgs/recharge-bg1.png') #f6f6f6 no-repeat;
		background-size: 100% 400rpx;
	}
</style>